<template>
    <div class="header_view">
        <div class="header_view_l">
            <img
                src="../assets/images/logo_icon.png"
                class="header_view_l_logo"
            />
            <div class="header_view_l_nav">
                <router-link
                    to="/"
                    :class="[current == 'home' ? 'active' : '']"
                    class="header_view_l_nav_item"
                >
                    首页
                </router-link>
                <router-link
                    to="/category"
                    :class="[current == 'category' ? 'active' : '']"
                    class="header_view_l_nav_item"
                >
                    分类
                </router-link>
                <router-link
                    to="/recommend"
                    :class="[current == 'recommend' ? 'active' : '']"
                    class="header_view_l_nav_item"
                >
                    推荐
                </router-link>
            </div>
            <div class="header_view_l_search">
                <img
                    class="header_view_l_search_icon"
                    src="../assets/images/search.png"
                />
                <input
                    type="text"
                    class="header_view_l_search_value"
                    placeholder="你在找什么？"
                    v-model="keyword"
                    @keyup.enter="searchItem"
                />
            </div>
        </div>
        <div class="header_view_r">
            <div class="header_view_r_cart" @click="cartList">
                <img
                    src="../assets/images/cart.png"
                    class="header_view_r_cart_icon"
                />
                <label v-if="token">{{cart.cart}}</label>
            </div>
            <img
                src="../assets/images/user.png"
                class="header_view_r_user"
                @click="userCenter"
            />
            <div class="header_view_r_info" v-if="token" @click="userCenter">
                {{phone}}
                <label>{{roleText[userInfo.role]}}</label>
            </div>
            <img
                src="../assets/images/exit.png"
                class="header_view_r_exit"
                @click="exit()"
                v-if="token"
            />
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import {
    removeToken
} from '@/utils/auth';
export default {
    props: {
        current: [String]
    },
    data() {
        return {
            token: null,
            userInfo: null,
            phone: '',
            keyword: '',
            roleText: {
                0: '其他',
                1: '设计师',
                2: '业主',
                3: '销售'
            },
        }
    },
    computed: {
        ...mapState([
            'cart',
        ]),
    },   
    created () {
        this.$store.dispatch('cart/getCartNum', {}).then((res) => {
        }).catch(() => {
        });
        this.token = localStorage.getItem('token') || null;
        let userInfo = null;
        let phone = '';
        if (localStorage.getItem('userInfo')) {
            userInfo = JSON.parse(localStorage.getItem('userInfo'));
            phone = userInfo.phone;
            let pat = /(\d{3})\d*(\d{4})/;
            this.phone = phone.replace(pat,'$1****$2');
        }
        this.userInfo = userInfo;
    },
    methods: {
        cartList() {
            if (this.token) {
                this.$router.push({path: '/cart'});
            } else {
                this.$router.push({path: '/login'});
            }
        },
        userCenter() {
            if (this.token) {
                this.$router.push({path: '/user'});
            } else {
                this.$router.push({path: '/login'});
            }
        },
        exit() {
            localStorage.removeItem('token')
            localStorage.clear();
            removeToken();
            this.token = null;
            this.$router.push({path: '/login'});
        },
        searchItem() {
            let query = {};
            query.keyword = encodeURI(this.keyword);
            this.$router.push({path: '/category/search', query: query})
        },
    }
}
</script>
<style scoped>
    .header_view {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        min-width: 1290px;
        height: 70px;
        background: #2F3235;
        z-index: 1999;
        display: flex;
        justify-content: space-between;
    }
    .header_view_l,
    .header_view_r {
        display: flex;
        align-items: center;
        height: 70px;
    }
    .header_view_l {
        padding-left: 40px;
    }
    .header_view_r {
        padding-right: 38px;
    }
    .header_view_l_logo {
        width: 214px;
        height: 36px;
        margin-right: 62px;
    }
    .header_view_l_nav {
        display: flex;
        height: 70px;
        align-items: center;
        margin-right: 39px;
    }
    .header_view_l_nav_item {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        text-decoration: none;
        margin-right: 52px;
        cursor: pointer;
        position: relative;
        height: 70px;
        line-height: 70px;
    }
    .header_view_l_nav_item:last-child {
        margin-right: 0;
    }
    .header_view_l_nav_item.active {
        font-weight: 500;
        color: #CEB68A;
    }
    .header_view_l_nav_item.active::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 36px;
        height: 5px;
        background: #CEB68A;
        border: 1px solid #CEB68A;
    }
    .header_view_l_search {
        width: 260px;
        height: 36px;
        position: relative;
    }
    .header_view_l_search_icon {
        width: 21px;
        height: 21px;
        position: absolute;
        left: 18px;
        top: 8px;
        z-index: 99;
    }
    .header_view_l_search_value {
        padding-left: 53px;
        width: 260px;
        box-sizing: border-box;
        height: 36px;
        background: rgba(108, 108, 108, 0.3);
        border-radius: 18px;
        font-size: 14px;
        font-family: FZLanTingKanHei-R-GBK;
        font-weight: 400;
        color: #ffffff;
        border: none;
        outline: none;
    }
    .header_view_l_search_value::placeholder {
        color: #B1B1B1;
    }
    .header_view_r {
        display: flex;
        align-items: center;
    }
    .header_view_r_cart {
        width: 26px;
        height: 26px;
        position: relative;
        margin-right: 50px;
    }
    .header_view_r_cart::after {
        position: absolute;
        top: 50%;
        right: -28px;
        transform: translateY(-50%);
        background: rgba(238, 238, 238, 0.2);
        width: 1px;
        height: 21px;
        content: '';
    }
    .header_view_r_cart_icon {
        width: 26px;
        height: 26px;
        cursor: pointer;
    }
    .header_view_r_cart label {
        position: absolute;
        right: -10px;
        top: -10px;
        width: 20px;
        height: 20px;
        background: #E0201D;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
    }
    .header_view_r_user {
        position: relative;
        width: 26px;
        height: 26px;
        margin-right: 61px;
        cursor: pointer;
    }
    .header_view_r_user::after {
        position: absolute;
        top: 50%;
        right: -29px;
        transform: translateY(-50%);
        background: rgba(238, 238, 238, 0.2);
        width: 1px;
        height: 21px;
        content: '';
    }
    .header_view_r_info {
        position: relative;
        margin-right: 61px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        cursor: pointer;
    }
    .header_view_r_info label {
        height: 20px;
        background: #CEB68A;
        border-radius: 10px;
        padding: 0 9px;
        margin-left: 10px;
    }
    .header_view_r_info::after {
        position: absolute;
        top: 50%;
        right: -32px;
        transform: translateY(-50%);
        background: rgba(238, 238, 238, 0.2);
        width: 1px;
        height: 21px;
        content: '';
    }
    .header_view_r_exit {
        width: 26px;
        height: 26px;
        cursor: pointer;
    }
</style>